<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link type="text/css" rel="stylesheet" href="../../template/css/com/com.css"/>
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css"/>
    <link rel="stylesheet" href="../../resource/weuimin.css" />
	<script src="../../template/js/jquery.js"></script>
	<script type="text/javascript" src="../../script/constants.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script src="../../script/api.js"></script>
    <style>
    	*{
	        margin: 0;
	        padding: 0;
	    }
	   .slider_wrap {
			position: relative;
			height: 180px;
			margin-bottom:0px;
			overflow: hidden;

		}

		.slider_wrap .slider_content {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.slider_wrap .slider_item {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.slider_wrap .slider_item img {
			border: 0;
			width: 100%;
			height: 100%;
		}

		.slider_wrap .slider_btn {
			width: 100%;
			height: 10px;
			position: absolute;
			bottom: 10px;
			left: 0;
			text-align: center;
		}

		.slider_wrap .slider_btnlist {
			width: 6px;
			height: 6px;
			border: 1px solid rgba(255,255,255,.8);
			display: inline-block;
			border-radius: 50%;
			margin: 5px;
		}

		.slider_wrap .slider_btnlist.curr {
			background: rgba(255,255,255,.8);
		}
		.item, .text {
            display: -webkit-box;
        }
		.roomInfo {
		  	margin-top:0;
		  	padding:0;
	  		width: 100%;
	  		height: 100px;
	  		background-color: #F9F6F6;
  		}
  		.roomInfo tr td{
  			height:20px;
  			margin:0;
		  	padding:0;
  		}
  		.roomInfo tr {
  			height:20px;
  			line-height: 0px;
  			margin:0;
		  	padding:0;
  		}
	  	.infoName {
			color: #8c8c8c;
	  		text-align: center;
	  		background-color: #F9F6F6;
	  	}
	  	.infoVal{
	  		color: #000000;
	 	 }
    	.bookThisRoom {
    		width:100%;
    		height:60px;
    		position: absolute;
    		bottom: 0;
    	}
    	.book {
    		width: 100%;
    		height: 100%;
    		text-align: center;
    	}
    	.bookRoom {

    		background-color: #FF9900;
    		font-size: large;
    		color: #F7F6F6;
    	}
    	.rmb {

    		background-color: #FFFFEE;
    		font-size: x-large;
    		font-weight:800;
    		color: #009999;
    	}
    </style>
</head>
<body style="background:#ffffff;">
	<div style="width: 100%;height: 50px;line-height: 50px;" >
		<span id="theadName"  style="font-size:20px;margin-left:10px;margin-bottom: 0px;color: #000000;"></span>
		<span class="btnInfo" onclick="closeInfo()" style="position:absolute;right:10px;font-size: x-large;color: #000000;" >&times</span>
	</div>
		<!--<div class="slider_wrap"> 
	        <div id="pics" class="slider_content" > 
	          
	        </div> 
		</div> -->
		<div id="hpic" style="height:200px;width:70%;margin: 0 auto;">

		      </div>
		<table id="roomInfo" class="roomInfo">

			<tbody>

			<tr>

					<td id="netTd" class="infoName">上网</td>
					<td id="net" class="infoVal"></td>

					<td id="isdlTd" class="infoName">卫浴</td>
					<td id="isdl" class="infoVal"></td>

			</tr>
			<tr>
					<td id="hwindowTd" class="infoName" >窗户</td>
					<td id="hwindow" class="infoVal"></td>
					<td class="infoName">可住</td>
					<td id="person" class="infoVal"></td>
			</tr>
			<tr>
				<td id="breakfastTd" class="infoName">早餐</td>
				<td id="breakfast" class="infoVal"></td>

					<td></td>
					<td></td>

			</tr>
			</tbody>
		</table>
		<div  id="bookThisRoom" class="bookThisRoom" hidden="hidden">
			<table class="book">
				<tbody>
					<tr>
						<td style="width: 50%;" class="rmb"><span style="font-size: large;color: #009999;">&yen;</span><span id="rmb"></span></td>
						<td style="width: 50%;" class="bookRoom" onclick="bookRoomAction()">添加到已选房间 </td>
					</tr>
				</tbody>
			</table>
		</div>
	<div id="loadingToast" style="display:none;">
			<div class="weui-mask_transparent"></div>
			<div class="weui-toast">
				<i class="weui-loading weui-icon_toast"></i>
				<p class="weui-toast__content">数据加载中...</p>
			</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../resource/jquery-1.js"></script>
<script type="text/javascript">
	var jstitle;
	var roomTypeId;
	var roomNum;
	var roomId;
	var price;
	var hroomId;

	var jdt;

	apiready = function(){
		$("#loadingToast").show();
		roomTypeId = api.pageParam.roomTypeId;
		roomId = api.pageParam.roomId;
		jstitle = api.pageParam.jstitle;
		roomNum = api.pageParam.roomNum;
		hroomId = api.pageParam.hroomId;
		if(hroomId!=null){
			var book = document.getElementById('bookThisRoom');
			book.hidden = false;
		}
		$("#loadingToast").show();
        var callback = function(ret, err){
            //console.log(ret.list);
        	var data = eval("("+ ret.list +")");
					//alert(JSON.stringify(data));
        	var json=JSON.stringify(data);
        	var pic = new Array();
        	for(var k=0;k<data.picUrl.length;k++){
        	   pic.push(data.picUrl[k].URL);
        	}
        	var html = "";
        	if(pic.length<3){
        		for(var i=0;i<=(3-pic.length);i++){
					pic.push(pic[i]);

        		}
        		for(var i=0;i<pic.length;i++){
        			html += '<div class="slider_item">'+ 
                			'<img src="'+pic[i]+'" alt="">'+ 
            			'</div>';
        		}
        	}else{
        		for(var i=0;i<pic.length;i++){
        			html += '<div class="slider_item">'+ 
                			'<img src="'+pic[i]+'" alt="">'+ 
            			'</div>';
        		}
        	}

        	var pics = document.getElementById("pics");
        	$api.html(pics, html);

			var offset = $api.offset($api.dom('#hpic'));
            var height = $("#hpic").height();
            var width = $("#hpic").width();
        	var UIScrollPromptView = api.require('UIScrollPromptView');
				UIScrollPromptView.open({
				    rect: {
				        x: offset.l,
				        y: offset.t,
				        w: width,
				        h: height
				    },
				    data: {
				        paths: pic,
				        captions: [],
				        prompts: []
				    },
				    styles: {
				        caption: {
				            height: 35,
				            color: '#E0FFFF',
				            size: 13,
				            bgColor: '#696969',
				            position: 'bottom'
				        },
				        indicator: {
				            align: 'center',
				            color: '#FFFFFF',
				            activeColor: '#298cb4'
				        },
				        prompt: {
				            button: {
				                normal: '',
				                highlight: '',
				                x: 0,
				                y: 100,
				                w: 60,
				                h: 40
				            },
				            x: 0,
				            y: 50,
				            w: 160,
				            h: 90,
				            contentMode: 'scaleToFill',
				            animation: true
				        }
				    },
				    placeholderImg: '',
				    contentMode: 'scaleToFill',
				    interval: 3,
				    fixedOn: 'order',
				    loop: true,
				    fixed: false
				}, function(ret) {
				    if (ret) {
				        //alert(JSON.stringify(ret));
				    }
				});

        	price = data.PRICE;
        	$("#rmb").text(data.PRICE);
        	var img = document.getElementById('img');
        	var isdl = document.getElementById('isdl');
        	var isnet = document.getElementById('net');
        	var hwindow = document.getElementById('hwindow');
        	var person = document.getElementById('person');
        	var bathroom = data.BATHROOM;
        	var breakfast = data.BREAKFAST;
        	$("#breakfast").text(breakfast);
        	var bedType = data.BED_TYPE;
        	var name = data.NAME;

        	var net = data.NET;
        	var num = data.NUM;
        	var picUrl = data.URL;
        	var iswindow = data.WINDOW;
        	if(roomNum==null||roomNum==""){
        		$('#theadName').text(name);
        	}else{
        		$('#theadName').text(name+"("+roomNum+")");
        	}
        	$api.text(isnet, net);
        	$api.text(isdl, bathroom);
        	$api.text(hwindow, iswindow);
        	$api.text(person, num+'人');


        	var fjid = data.ID;

			$("#loadingToast").hide();
        }
	    var parameter = {"typeid" : roomTypeId};
	    console.log(roomTypeId);
	    apiAjax(JSON.stringify(parameter),url.jdroomDel,callback);
        //});
		var roomInfo = api.pageParam.onlyInfo;

		if(roomInfo!=null){
			$api.css(bookThisRoom,'display:none');
		}

	};
	function closeInfo(){
		api.closeFrame({
        });
	}
	function bookRoomAction(){


		var jsfun = 'setHeaderInfo("fav","'+roomId+'","'+roomNum+'","'+roomTypeId+'","'+price+'");';
		api.execScript({
		//name: 'book_hotel', //winName
		//frameName: 'order',
		script: jsfun

		});
		var theadName = $('#theadName').text();
		var width = document.documentElement.clientWidth;
	 	var height = document.documentElement.clientHeight+150;

        api.closeFrame({
        });
	}
</script>
</html>
